<template>
  <div class="transQuery_main">
    <a-form style="width:600px;">
      <a-row>
        <a-form-item label="选择日期" v-bind="formItemLayout">
          <a-range-picker
            :disabledDate="disabledDate"
            style="width:100%;"
            :locale="zh_CN"
            format="YYYYMMDD"
            @change="onChange"
            v-model="withdrawDate"
            :allowClear="isClear"
          />
        </a-form-item>
      </a-row>

      <a-row>
        <a-col :span="4"></a-col>
        <a-col :span="12" :offset="1">
          <a-form-item>
            <a-button
              class="button_sty"
              type="primary"
              :loading="loading"
              @click="downLoadFile()"
            >导出报表</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <h3 class="tableClass" style="margin-bottom: 15px;">历史导出记录</h3>
    <a-table
      class="tableClass"
      :columns="columns"
      :dataSource="monthList"
      size="small"
      :pagination="false"
      :rowKey="record => record.downloadToken"
    >
      <span slot-scope="record" slot="action">
        <a
          href="javascript:false;void(0)"
          @click="downloadItem(record.downloadToken,record.uploadFileName)"
        >下载</a>
      </span>
    </a-table>

    <a-pagination
      class="tableClass"
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="queryList.pageSize"
      style="margin-top: 10px;text-align: right"
    />
    <!-- </a-tab-pane>
    </a-tabs>-->
  </div>
</template>

<script>
const columns = [
  {
    title: "导出时间",
    dataIndex: "ctime",
  },
  {
    title: "文件名称",
    dataIndex: "uploadFileName",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import ADatePicker from "ant-design-vue/es/date-picker";
import moment from "moment";
import zh_CN from "ant-design-vue/lib/date-picker/locale/zh_CN";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;
const ARangePicker = ADatePicker.RangePicker;
export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    ARangePicker,
  },

  data() {
    return {
      columns,
      zh_CN,
      today: new Date(),
      isClear: false,
      withdrawDate: [],
      excelurl: "",
      dayList: [],
      monthList: [],
      query: {
        startDate: "",
        endDate: "",
      },
      queryList: {
        page: 1,
        pageSize: 10,
        data: { rootPath: "report.profit" },
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      login: false,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12, offset: 1 },
        },
      },
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.listTable();
  },
  methods: {
    moment,
    //日期不可选
    disabledDate(current) {
      // return current > moment().endOf('day');
      return current > moment().subtract(0, "day");
    },
    onChange(dates, dateStrings) {
      console.info(dateStrings);
      // this.withdrawDate = dateStrings;
      this.query.startDate = dateStrings[0];
      this.query.endDate = dateStrings[1];
      console.info(this.query);
      console.info(this.withdrawDate);
    },
    downLoadFile() {
      if (this.withdrawDate.length == 0) {
        this.$message.warning("请选择日期！");
        return false;
      }
      this.loading = true;
      this.$axios.post("/agent/transaction/derive/profit", this.query).then(
        (res) => {
          console.log(res);
          this.loading = false;
          if (res.data.code == "OK") {
            this.downloadItem(res.data.data, "");
            let self = this;
            let timer = setTimeout(function () {
              self.listTable();
            }, 2000);
          } else {
            this.$message.error(res.data.message);
          }
        },
        (err) => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },

    // 报表下载记录表格
    listTable() {
      this.$axios
        .post("/agent/transaction/profit/excelRecord", this.queryList)
        .then(
          (res) => {
            console.log("res", res);
            if (res.data.code == "OK") {
              this.monthList = res.data.list;
              this.pagination.current = res.data.current;
              this.pagination.total = res.data.total;
            } else {
              this.monthList = null;
              this.pagination.current = 1;
              this.pagination.total = 1;
              this.$message.info(res.data.message);
            }
          },
          (err) => {}
        );
    },
    // 下载单个文件
    downloadItem(downloadToken, uploadFileName) {
      const a = document.createElement("a");
      a.download = uploadFileName;
      let downloadUrl = "/file/file/download/" + downloadToken;
      a.href = downloadUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.queryList.page = page;
      this.queryList.pageSize = pageSize;
      this.listTable();
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.transQuery_main {
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}
.tableClass {
  width: 100%;
  margin: 0 auto;
}
</style>